<template>
  <div class="imgcard">
    <el-row :gutter="20" style="width: 100%; height: 100%;">
      <el-col v-for="(childItem, index) in imgs.children" :key="index" :span="6">
        <div class="grid-content" @click="() => gotoDetails(childItem)">
          <el-image class="icon" :src="fileBaseUrl() + childItem.imageUrls.split(',')[0]" alt=""
            @error="handleImgError($event, index)" lazy fit="cover"/>
          <div class="bottom">
            <h1>{{ childItem.productName }}</h1>
            <p>{{ childItem.englishName }}</p>
            <div class="bottom-to">
              <p class="link"> 了解更多</p>
            </div>

          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {fileBaseUrl} from '@/apis/files'
import { useRouter } from 'vue-router'

const router = useRouter()
// 定义接收的 props
const props = defineProps({
  imgs: {
    type: Array,
    required: true
  }
})


const gotoDetails = (childItem) => {
  router.push({
    path: '/details',
    query: {
      id: childItem.productId
    }
  })
}

</script>

<style scoped>
/* 保持原有样式不变 */
h1 {
  margin: 0;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.95);
  font-weight: bolder;
}

p {
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.95);
  font-size: 14px;
}

.imgcard {
  width: 100%;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-content {
  height: 100%;
}

.icon {

  width: 100%;
  height: 380px;
}

.bottom {
  margin-top: 10px;

}

.bottom-to {
  display: flex;
}

.el-row {
  width: 80% !important;
}

.el-col {
  height: 100%;
  padding-top: 10px;
  padding-bottom: 20px;
  position: relative;
}

.el-col::after {
  content: url(../../../../assets/images/toright.png);
  position: absolute;
  right: 10px;
  bottom: 22px;
  opacity: 0;
  visibility: hidden;
}

.el-col:hover {
  border-radius: 5px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1),
    -5px -5px 20px rgba(0, 0, 0, 0.1),
    0px 0px 20px rgba(255, 255, 255, 0.8) inset;
  transition: box-shadow .6s;
}

.el-col:hover::after {
  opacity: 1;
  visibility: visible;
  transition: visibility, opacity .6s;
}

.link {
  margin-top: 10px;
  font-weight: 700;
  border-bottom: 1px solid black;

}
</style>